iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Modern Web

打造你的第一個網站系列 第 7

第七天 CSS選擇器介紹

  • 分享至 

  • xImage
  •  

什麼是CSS?

CSS是Cascading Style Sheets的縮寫。簡單來說,CSS不可以單獨使用,但是,可以幫我們的HTML語法增加更多的花樣變化。

回到我們的title的部分,我們有設定h1標籤兩個屬性,id與class (用選擇器改變我們要改變的屬性,我們可以記一個口訣:id用#class用.),我們同時改變這段文字的顏色與大小,這時會發現,顏色是橘色的而不是我們上一個設定的steelblue,這是因為CSS的檔案讀寫是由上而下的,所以寫在最後面的會覆蓋過前面寫的。

在昨天的範例中,我們在style.css中有一段程式碼如下:

.title {
    color: steelblue;
    font-size: 100px;
}

此段CSS的內容大意是,改變標籤class為title的內容,文字改為steelblue且文字大小改為100px。

.title {
    color: orange;
}

此段CSS code會覆蓋掉上一段color的效果。

https://ithelp.ithome.com.tw/upload/images/20230917/20149625GaM6Th71uX.png


上一篇
第六天 CSS選擇器語法
下一篇
第八天 CSS優先順序
系列文
打造你的第一個網站32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言